import * as React from 'react';
import { Row, Col, Table, Tooltip, Switch, Form, Button, Typography } from 'antd';
import { Icon as IconProps, FormatLog as FormatLog } from '../../hook/common';
import Icon from '../icon';
import './index.less';
import AnalysisPanel from '../analysisPanel';
import InfiniteScroll from 'react-infinite-scroller';

import SourceMapButton from '../sourceMapButton'

const {
    useState,
    useMemo
} = React;

const { Column } = Table;

function VersionIcon(props: IconProps) {
    return (
        <span className="logpanel-iconwrap">
            <Icon type={props.name} style={{
                marginRight: '4px'
            }}/>
            {props.version}
        </span>
    );
}

function VersionIconList(data: IconProps[]) {
    return data.map((item, index) => {
        return (
            <VersionIcon key={index} {...item} />
        );
    });
}

interface LogPanelProps extends FormatLog {
    left?: number,
    top?: number,
    target?: string
}

function LogPanelInline(props: LogPanelProps) {
    const {
        target,
        appIcon,
        platform,
        ip,
        time,
        from,
        rowNum = 0,
        colNum = 0,
        webview,
        userAgent,
        uin,
        left,
        top,
        version
    } = props;

    return (
        <div className="logdetail-panel">
            <Row className="logdetail-row">
                <Col span={2}>
                    <span className="label">
                        Time
                    </span>
                </Col>
                <Col span={21} className="logdetail-info">{time}</Col>
            </Row>
            <Row className="logdetail-row">
                <Col span={2}>
                    <span className="label">IP</span>
                </Col>
                <Col span={21} className="logdetail-info">{ip}</Col>
            </Row>
            <Row className="logdetail-row">
                <Col span={2}>
                    <span className="label">uin</span>
                </Col>
                <Col span={21} className="logdetail-info">{uin}</Col>
            </Row>
            <Row className="logdetail-row">
                <Col span={2}>
                    <span className="label">userAgent</span>
                </Col>
                <Col span={21} className="logdetail-info">{userAgent}</Col>
            </Row>
            <Row className="logdetail-row">
                <Col span={2}>
                    <span className="label">Form</span>
                </Col>
                <Col span={21} className="logdetail-info">
                    {
                        <div>
                            <a target="_blank" href={`${from}`}>
                                {
                                    rowNum ? (
                                        <span>{rowNum}行</span>
                                    ) : null
                                }
                                {
                                    colNum ? (
                                        <span>{colNum}列</span>
                                    ) : null
                                }
                                <p>
                                    {from}
                                </p>
                            </a>

                            {
                                target ? <SourceMapButton target={target} rowNum={rowNum}
                                    colNum={colNum}></SourceMapButton> : null
                            }
                        </div>
                    }
                </Col>
            </Row>
            <Row className="logdetail-row">
                <Col span={2}>
                    <span className="label">
                        App
                    </span>
                </Col>
                <Col span={21} className="logdetail-info">
                    {VersionIconList(appIcon)}
                </Col>
            </Row>
            <Row className="logdetail-row">
                <Col span={2}>
                    <span className="label">Paltform</span>
                </Col>
                <Col span={21} className="logdetail-info">
                    {VersionIconList(platform)}
                </Col>
            </Row>
            <Row className="logdetail-row">
                <Col span={2}>
                    <span className="label">ExtraInfo</span>
                </Col>
                <Col span={21} className="logdetail-info">
                    {
                        webview.length > 0 ? (
                            <span>浏览器内核为 {webview.join(';')}</span>
                        ) : null
                    }
                </Col>
            </Row>
            <Row className="logdetail-row">
                <Col span={2}>
                    <span className="label">version</span>
                </Col>
                <Col span={21} className="logdetail-info">
                    {version}
                </Col>
            </Row>
        </div>
    );
}


function ColumnIndex(text: string, record: FormatLog, index: number) {
    const className = (record.level & 2) ? 'log-type-default' : 'log-type-error';
    return (
        <div className={className}>{index}</div>
    );
}


interface LogTableProps {
    logs: FormatLog[],
    allLogs: FormatLog[],
    id?: number,
    isEnd: boolean,
    loadMore: Function
}

// 八种表格类型
export enum Type {
    APP,
    ISP,
    MAP,
    WEBVIEW,
    FROM,
    VERSION,
    NETTYPE,
    PLATEFORM
}

export default function LogTable(props: LogTableProps) {
    const {
        logs,
        isEnd,
        loadMore,
        allLogs
    } = props;

    const [showList, setShowList] = useState([]);

    const appenShowList = (type:Type) => {
        setShowList(preList => [...preList, type]);
    }
    const removeShowList = (type:Type) => {
        const newList = showList.filter(item => item!==type);
        setShowList(newList);
    }
    const switchChange = (type:Type) => {
        if (showList.includes(type)) {
            removeShowList(type);
        } else {
            appenShowList(type);
        }
    }
    const handlerLoadMore = function () {
        loadMore();
    }
    return (
        <div className="logtable">
            <h3>统计图表</h3>
            <div className="logtable-control">
                <Form layout="inline">
                    <Form.Item label="App分布">
                        <Switch checked={showList.includes(Type.APP)} onChange={() => switchChange(Type.APP)} />
                    </Form.Item>
                    <Form.Item label="NetType分布">
                        <Switch checked={showList.includes(Type.NETTYPE)} onChange={() => switchChange(Type.NETTYPE)} />
                    </Form.Item>
                    <Form.Item label="Platform分布">
                        <Switch checked={showList.includes(Type.PLATEFORM)} onChange={() => switchChange(Type.PLATEFORM)} />
                    </Form.Item>
                    <Form.Item label="From分布">
                        <Switch checked={showList.includes(Type.FROM)} onChange={() => switchChange(Type.FROM)} />
                    </Form.Item>
                    <Form.Item label="Version分布">
                        <Switch checked={showList.includes(Type.VERSION)} onChange={() => switchChange(Type.VERSION)} />
                    </Form.Item>
                    <Form.Item label="webview内核分布">
                        <Switch checked={showList.includes(Type.WEBVIEW)} onChange={() => switchChange(Type.WEBVIEW)} />
                    </Form.Item>
                    <Form.Item label="运营商分布">
                        <Switch checked={showList.includes(Type.ISP)} onChange={() => switchChange(Type.ISP)} />
                    </Form.Item>
                    <Form.Item label="地区分布">
                        <Switch checked={showList.includes(Type.MAP)} onChange={() => switchChange(Type.MAP)} />
                    </Form.Item>
                </Form>
            </div>

            <AnalysisPanel
                logs={allLogs}
                showList = {showList}
            />
            <h3>历史日志</h3>
            <InfiniteScroll
                initialLoad={false}
                pageStart={0}
                loadMore={handlerLoadMore}
                hasMore={!isEnd}
                useWindow={true}
            >

                {useMemo(() => <Table dataSource={logs} rowKey={record => `${record._index}`}
                    expandedRowRender={LogPanelInline}
                    expandRowByClick={true}
                    pagination={false}
                    className="aegis-logtalbe"
                >
                    <Column
                        title="#"
                        key="index"
                        width={10}
                        className="logtable-index"
                        render={ColumnIndex}
                    />
                    <Column
                        title="Time"
                        dataIndex="time"
                        key="time"
                        width={118}
                    />
                    <Column
                        title="Uin"
                        dataIndex="uin"
                        key="uin"
                        width={150}
                    />
                    <Column
                        title="Message"
                        dataIndex="msg"
                        key="msg"
                        render={(msg) => {
                            return (
                                <Typography.Paragraph>{msg}</Typography.Paragraph>
                            )
                        }}
                    />
                </Table>, [logs])}
            </InfiniteScroll>
        </div>
    );
}
